<script setup lang="ts">
import { reactive } from "vue";
import type { RuleObject } from "ant-design-vue/es/form";
import { Form } from "ant-design-vue";
import { handleForm } from "@/utils/alert.ts";

const props = defineProps<{ order?: IOrder }>()

export type OrderRemarkEvent = {
  remark: string
}

const emit = defineEmits<{
    (e: 'submit', value: OrderRemarkEvent): void
}>()

const formState = reactive<OrderRemarkEvent>({
  remark: props.order?.factory_words || ''
})
const formRules = reactive<PartialRecord<OrderRemarkEvent, RuleObject[]>>({
  remark: []
})
const { validate, validateInfos } = Form.useForm(formState, formRules)

const onSubmit = async () => {
  const res = await validate().catch(handleForm)
  if (res) emit('submit', res)
}

</script>

<template>
  <div>
    <AForm layout="horizontal"
           autocomplete="off"
           :label-col="{ span: 4 }"
           :wrapper-col="{ span: 18 }"
           :model="formState"
           @finish="onSubmit">
      <AFormItem label="备注信息" v-bind="validateInfos.remark">
        <ATextarea v-model:value="formState.remark"></ATextarea>
      </AFormItem>

      <AFormItem :wrapper-col="{ offset: 4, span: 18 }">
        <AButton type="primary" html-type="submit">确认</AButton>
      </AFormItem>
    </AForm>
  </div>
</template>